/**
 * webscoket 他是一个 有状态的链接 
 * 相比较http来说 他更灵活 
 * 同时 他创建的是一个长链接 也就是说 在获取数据的时候 不需要每次都要等待链接的时间  那么 http的请求是 每次都要重新发起请求 才能得到数据 这个是ws的优势
 * 但是 ws 他不太稳定 因为 网络原因 以及服务原因 有可能会掉线 所以为了保持 一直的链接状态 需要心跳检测 来和服务端定时通讯 以保障服务的稳定性 
 * 同时 当服务端出现异常时 ws会断开 那就需要自动重连 因此 在最外层需要一个定时器 来保障 服务端关闭重启后 还可以自动链接 ws
 */
export const wssDp = function () {
    // 获取index模块 （目的： 是为了 将websocket中的数据 放到 pinia中）
    let index = useStore.index()
    // 此时代表 需要断开重连
    let flag = 1
    interface evtData {
        data: String
    }
    // 页面进行监听pinia当中的数据 还得是深度监听
    let ws = <any>null
    // 定义一个断开重连的数量  只允许重连 10次
    let repeatConnectNum = 1
    // 心跳检测的定时器 默认是空
    let heartTimer = <any>null
    // 断开重连的定时器 每5秒定时 获取数据 失败是 会自动进行重连
    let wsTimer = setInterval(() => {
        // 判断ws是不是已经被实例化了 
        if (!ws) {
            // 如果没有被实例化 就重新实例化一下
            ws = new WebSocket("ws://localhost:3002/bigscreen/websockets?id=10086")
            // 如果实例化失败 就让 断开重连的次数++
            repeatConnectNum++
            // console.log(repeatConnectNum)
            // 如果重连次数 达到 10次 就将定时器清空
            if (repeatConnectNum === 10) {
                clearInterval(wsTimer)
                // heartTimer = null
                // 心跳检测 也需要清空
                clearInterval(heartTimer)
            }

        }
        // 当websocket 链接成功后  就会自动调用这个方法   那么需要在这个方法中 去 进行心跳检测
        ws.onopen = function () {
            console.log("链接成功")
            // 链接成功 恢复 重连次数 
            repeatConnectNum = 1
            // 心跳检测 每3秒检测一次
            heartTimer = setInterval(() => {
                // ws.send(JSON.stringify({type:"heart",msg:"心跳检测"}))
                // console.log("心跳")
                // 向服务端进行推送 type 不同的type 代表不同的数据 
                flag=1
                ws.send(JSON.stringify({ type: "rightTop" }))
                // leftBottom
                ws.send(JSON.stringify({ type: "leftBottom" }))
                ws.send(JSON.stringify({ type: "rightBottom" }))
                setTimeout(() => {
                    if(flag!=2){
                        ws = null
                    }
                }, 1000);
            }, 3000)
        }
        // 当服务端 向客户端推送数据的时候 就会自动调用这个方法 
        ws.onmessage = function <evt extends evtData>(evt) {

            // console.log(evt)
            // console.log()
            // 服务端发送过来的数据 是一个JSON字符串 所以需要 将其转换为 JSON对象 
            let data = JSON.parse(evt.data)
            // console.log(data)
            // 根据服务端返回的type 来确定 数据的位置 并且存储到pinia中 
            if (data.type === "rightTop") {
                flag =2
                index.indexRightTop = data.data
            } else if (data.type === "leftBottom") {
                index.indexLeftBottom = data
            } else if (data.type === "rightBottom") {
                index.indexRightBottom = data.data
            }

        }
        // 当服务端链接关闭 客户端 会自动调用 关闭的方法  此时 需要 将 链接重置为空 方便自动重连
        ws.onclose = function () {
            // 断开重连 说明服务端 断开了 服务  所以需要 将ws的实例 赋空
            ws = null
        }
        // 当出现报错时  会调用这个回调函数 
        ws.onerror = function () {
            ws = null
        }
    }, 5000)
}